<template>
  <div class="recruit">

    <div class="recruit-header">
      <div class="recruit-header-content">
        <div class="recruit-header-img">
        </div>
      </div>
    </div>


    <div class="recruit-container">

      <div class="enter">

        <div class="enter-hd">
          <div class="desc">
            全国范围内诚招合作伙伴。诚挚邀请有实力、有本地资源的伙伴加入，共赢本地生活美好未来！
            <button type="button" class="kw-btn btn-text btn-large">
              <span class="kw-btn__inner" @click="dialogVisible=true">查看申请详情</span>

            </button>
          </div>
          <div>
            <h2  >成为商家，只需三步</h2>
            <div class="steps">
              <div class="steps-icon"><img
                  src=""
                  alt="">
                申请
              </div>
              <div class="steps-arrow"><img
                  src=""
                  alt=""></div>
              <div class="steps-icon"><img
                  src="//shadow.elemecdn.com/faas/daili-recruit-gray/static/img/examine.19616be.png" alt="">
                审批
              </div>
              <div class="steps-arrow"><img
                  src=""
                  alt=""></div>
              <div class="steps-icon"><img
                  src=""
                  alt="">
                开店
              </div>
            </div>
          </div>
        </div>

        <!-- 注册列表 -->
        <div class="enter-register">

          <el-form :model="form" :rules="rules" ref="form" label-width="140px" >

           <div v-show="step===1">
              <el-form-item label="联系人手机号" prop="loginName">
                <el-input v-model="form.loginName"></el-input>

                <div class="mix-input-btn">
                  <el-link  :disabled="btnSendVisable"  @click="sendSms"  >{{smsinfo}}</el-link>
                </div>
              </el-form-item>

              <el-form-item label="验证码" prop="code">
                <el-input v-model="form.code"></el-input>
              </el-form-item>

              <el-form-item>
                  <el-button type="primary" :disabled="loginDisabled" @click="btnNext">立即注册</el-button>
              </el-form-item>

              <el-form-item>
                 <el-checkbox  v-model="agree">
                   我已阅读并同意
                   <a href="/#/safety-policy" target="_blank" class="el-link el-link--primary is-underline">华信商家版隐私政策</a>
                </el-checkbox>

              </el-form-item>

            </div>

            <div v-show="step===2">

              <el-form-item label="商家名称" prop="name">
                <el-input v-model="form.name" placeholder="商家名称" />
              </el-form-item>

              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="form.phone" placeholder="联系电话" />
              </el-form-item>

              <el-form-item label="密码" prop="loginPwd">
                 <el-input type="password" v-model="form.loginPwd" placeholder="密码" />
              </el-form-item>

              <el-form-item label="确认密码" prop="reLoginPwd">
                <el-input type="password" v-model="form.reLoginPwd" placeholder="确认密码" />
              </el-form-item>

              <el-form-item label="地图位置" prop="longitude" style="text-align:left;">
                <span>经度:{{form.longitude}} 纬度:{{form.latitude}}</span>
                <el-button type="primary" @click="mapShow=true">选择位置</el-button>

                <div style="display:none;">
                   <el-input   v-model="form.longitude"  />
                 </div>
              </el-form-item>

              <el-form-item label="商家地址" prop="address">
                <el-input v-model="form.address" placeholder="商家地址" />
              </el-form-item>

               <el-form-item label="商家图片" prop="picture">
                  <el-upload
                    class="avatar-uploader"
                    :action="imageUploadUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>

                  <div style="display:none;">
                     <el-input   v-model="form.picture"  />
                   </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary"   @click="btnSave">提交信息</el-button>
                </el-form-item>

            </div>

             <div v-show="step===3">
               <el-result icon="success"  title="申请信息已发送" subTitle="请耐心等待审核结果,会以短信通您.">
              </el-result>
            </div>


          </el-form>

        </div>

      </div>

    </div>


    <!-- 申查申请 -->
    <el-dialog title="申请详情" :visible.sync="dialogVisible" width="450px">
      <div class="apply-detail">
        <div class="apply-detail-item">
          <h2 >
            合作商申请基本条件：
          </h2>
          <ul>
            <li >
              有正规业务经营的公司资质，盈利状况良好；
            </li>
            <li>
              熟悉当地城市餐饮行业发展状况，在当地拥有良好的口碑资源；
            </li>
            <li>
              在当地拥有较强的政府人脉关系及宣传推广资源；
            </li>
            <li >
              较强的运营能力及成熟的行业经验；
            </li>
            <li>
              具备较强的经济实力；
            </li>
          </ul>
        </div>
        <div class="apply-detail-item">
          <h2>
            报名须知：
          </h2>
          <ul>
            <li>
              请详细阅读合作商申请基本条件；
            </li>
            <li>
              请确保您填写的信息真实、有效，如在申请过程中存在虚假信息，该平台有权随时终止合作流程；
            </li>
            <li>
              填写过程需要您用心填写，时间约2分钟；
            </li>
            <li>
              如您已经阅读完成，请继续您的报名！
            </li>
          </ul>
        </div>
      </div>

    </el-dialog>

 <!-- 地图选择器-->
    <el-dialog title="位置选择器" :visible.sync="mapShow" width="800px" append-to-body  :close-on-click-modal="false">
      <BaiduAddress    :itemData="form" v-on:myclick="handlerLocation"></BaiduAddress>
    </el-dialog>

  </div>
</template>

<script>
  import {isPhone} from '@/utils/validate.js'
  import { sendSmsApi, validateRegisterApi, existsLoginName} from '@/api/sms.js'
  import {shopRegisterApi} from '@/api/front.js'
  import BaiduAddress from '@/components/BaiduAddress/index.vue'
  export default {
    // 挂载地图级组件
    components:{
      BaiduAddress
    },
    data() {
      // 验证密码是否相同
      var pwdConfirmFunction = (rule, value, callback) => {
            if(value=== this.form.loginPwd){
              callback()
            }else{
                 callback(new Error('两次输入的密码不一致'));
            }
      }

       var validateLoginNameUsered = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('值不能为空'));
              } else {

                if(isPhone(value)){
                  //发送查询电话号码请求
                  existsLoginName(value).then(resp=> {
                     if(resp.data){
                        this.isUsed=true
                        callback(new Error(resp.data));
                     }else{
                        this.isUsed=false
                        callback();
                     }
                  })

                }else{
                  callback(new Error('手机号格式不正确'));
                }
             }
        }


      return {
         imageUploadUrl: process.env.VUE_APP_BASE_API+'/front/upload/image',
        // 百度地图
         mapShow: false,
        // 当前步骤
        step: 1,
        // 倒计时
        countDownNum:0,
        // 是否同意
        agree: false,
        dialogVisible: false,
        // 手机号是否使用过
        isUsed: false,
        smsinfo: '发送验证码',
        // 发送短信按钮是否禁用(true禁用，false启用 )
        btnSendVisable: true,
        form: {
          picture: undefined,
          address: undefined,
          latitude: undefined,
          longitude: undefined,
          status: 2,
          loginName: undefined
        },
        rules:{
          loginName: [
            { required: true, message: '该值不能为空', trigger: 'blur' },
            { validator: validateLoginNameUsered, trigger: 'blur'}
          ],
          code: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '该值不能为空', trigger: 'blur' },

          ],
          address: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
          ],
          longitude: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
          ],
          album: [
            { required: true, message: '该值不能为空', trigger: 'blur' }
          ],
          loginPwd: [
             { required: true, message: '该值不能为空', trigger: 'blur' },
             { min:4, max:30, message: '密码长度在4-30个字符之间', trigger: 'blur' }
          ],
          reLoginPwd: [
            { required: true, message: '该值不能为空', trigger: 'blur' },
            { validator: pwdConfirmFunction, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      // 发送验证码
      sendSms(){
         if(!this.agree){
           this.$message.error('请勾选并阅读华信商家版隐私政策');
           return;
        }

        if(this.isUsed){
          this.$message.error('联系人手机号已被使用');
          return;
        }

        // 发送短信
        sendSmsApi(this.form.loginName).then(resp => {
             //发送短信禁用，导计时
             this.btnSendVisable=true
             // 商家联系电话，就是登录名称
             this.form.phone= this.form.loginName


             // 倒计时间秒
             this.countDownNum= resp.data.expired
             this.smsinfo='('+this.countDownNum+')秒后重新发送'
             //定时器
             var tId=setInterval(()=> {
               this.countDownNum--
               if(this.countDownNum===0){
                 // 重新发送按钮启用
                  this.btnSendVisable=false
                  this.smsinfo= '发送验证码'
                  clearInterval(tId)
               } else{
                    this.smsinfo='('+this.countDownNum+')秒后重新发送'
               }

             },1000)
        })

      },
      // 地图位置注册事件
      handlerLocation(resp){

        this.form.address= resp.address
        this.form.longitude=resp.longitude
        this.form.latitude=resp.latitude
        this.mapShow=false
      },
      // 图片上传成功以后返回的数据(json, file[blob]数据)
       handleAvatarSuccess(res, file) {

         this.form.picture=res.data.image_url
       },
       // 图片上传之前验证
       beforeAvatarUpload(file) {
         const isJPG = file.type === 'image/jpeg' ||  file.type === 'image/png';
         const isLt1M = file.size / 1024 / 1024 < 1;

         if (!isJPG) {
           this.$message.error('上传图片只能是 JPG、PNG 格式!');
         }
         if (!isLt1M) {
           this.$message.error('上传头像图片大小不能超过 1MB!');
         }
         return isJPG && isLt1M;
       },
      // 立即注册
      btnNext(){
        // 验证输入的验证码是否正确
        validateRegisterApi(this.form).then( resp => {
          // 正确(进入到录入商家信息页面)
          this.step=2
        })
      },
      // 提交保存商家信息
      btnSave(){
        // 验证数据有效性
        this.$refs["form"].validate(valid => {
          console.log(valid)
          if (valid) {
            // 保存
            shopRegisterApi(this.form).then(resp=> {
               this.step=3
            })
          }

        })

      },
       handleChange(value) {
         console.log(value)
      }
    },
    computed: {
      // 登录按钮是否禁用
      loginDisabled(){
        //账户被使用
        if(this.isUsed){
          return true;
        }

        if(!this.agree){
            return true;
          }
          // 如果不为空
          if(this.form.loginName){
            // 再验证手机号码格式是否正确，如果正确
            if(isPhone(this.form.loginName)){
              return false
            }else{
              // 格式不正确
              return true
            }
          }
          return true
        }
    },
    watch:{
      'form.loginName'(newValue,oldValue){
        if(newValue && isPhone(newValue)){
          this.btnSendVisable =false
        }else{
          this.btnSendVisable= true
        }
      },
      'isUsed'(newValue,oldValue){ 
        if(newValue){
          this.btnSendVisable =true
        }else{
          this.btnSendVisable= false
        }
      }
    },
    created() {

    }

  }
</script>

<style scoped lang="scss">
  .recruit-header {
    background: #009bff;
    background: -webkit-gradient(linear, left top, right top, from(#00adff), to(#0082ff));
    background: linear-gradient(90deg, #00adff, #0082ff);
  }

  .recruit-header-content {
    position: relative;
    width: 940px;
    margin: 0 auto;
    height: 200px;
  }

  .recruit-header-img {
    position: absolute;
    left: -250px;
    width: 1440px;
    height: 100%;
    background: url(https://img.alicdn.com/imgextra/i1/O1CN01B3IqWN1lKuFrQqyvs_!!6000000004801-2-tps-5760-800.png) 50% no-repeat;
    background-size: cover;
  }

  .recruit-container {
    width: 940px;
    margin: 0 auto;
  }


  .enter {
    padding: 16px 16px 0;
    background: #fff;
    max-width: 652px;
    margin: 0 auto;
  }

  .recruit-container>div {
    min-height: calc(100vh - 200px);
  }

  .enter-hd {
    text-align: center;
  }

  .desc {
    text-align: left;
    background: #f5f7fa;
    border-radius: 6px;
    font-size: 13px;
    line-height: 22px;
    color: #909399;
    padding: 15px;
    margin-bottom: 32px;
  }

  .kw-breadcrumb-item,
  .kw-btn,
  .kw-checkbox .kw-checkbox-appearance,
  .kw-link,
  .kw-modal,
  .kw-pager li,
  .kw-pagination-size,
  .kw-pagination-total,
  .kw-radio .kw-radio-appearance,
  .kw-tooltip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .kw-btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    font-weight: 500;
    text-decoration: none;
    vertical-align: middle;
  }


  .kw-btn.btn-large {
    height: 40px;
    line-height: 38px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
  }

  .kw-btn.btn-text {
    color: #606266;
    background-color: transparent;
    padding: 0;
    border: none;
    position: relative;
    background: none;
  }

  .desc .kw-btn {
    color: #606266;
    height: 22px;
    line-height: 22px;
    vertical-align: baseline;
  }

  .enter-hd h2 {
    color: #303133;
    font-size: 18px;
    font-weight: 400;
  }

  .steps {
    padding: 30px 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #e4e7ed;
  }

  .steps-icon {
    width: 64px;
  }


  .steps-icon img {
    width: 100%;
    margin-bottom: 10px;
  }

  .steps-arrow {
    padding-top: 14px;
  }

  .enter-register {
    padding: 25px 0;
    text-align: center;
  }

  .apply-detail-item {
      padding: 12px 0;
  }

  .apply-detail-item:first-child {
      border-bottom: 1px solid #e4e7ed;
  }

  .apply-detail h2 {
      font-size: 16px;
      color: #303133;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 10px;
  }

 .apply-detail ul {
      padding: 0;
      list-style: none;
  }

  .apply-detail-item ul li {
      font-size: 14px;
      color: #606266;
      padding-left: 20px;
      line-height: 24px;
      position: relative;
  }

  .apply-detail-item ul li:after {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #c0c4cc;
      left: 0;
      top: 9px;
  }

  .apply-detail-item {
      padding: 12px 0;
  }

  .apply-detail h2 {
      font-size: 16px;
      color: #303133;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 10px;
  }

  .enter-register {
      padding: 25px 0;
      text-align: center;
  }

  .enter-register .mix-input-btn {
      background: #fff;
      font-size: 12px;
      position: absolute;
      right: 2px;
      top: 10px;
      color: #303133;
      font-weight: 500;
      height: 20px;
      line-height: 20px;
      padding: 0 15px;
      border-left: 1px solid #dcdfe6;
      cursor: pointer;
  }
  .enter-register .mix-input-btn .el-link:after{
     border-color: transparent;
  }
</style>
